import React from 'react'

// 关于this的指向三种处理方法
// 1.bind(Function.prototype.bind())
class ThisBind extends React.Component {
  constructor () {
    super()
    this.opData = this.opData.bind(this) // 用bind指回render
  }
  opData () {
    console.log('this处理方法bind篇章')
  }
  render () {
    return <button onClick={this.opData}>this处理方法bind篇章</button>
  }
}
// 2.class实例方法
class ThisClass extends React.Component {
  opData = () => {
    console.log('this处理方法箭头函数篇章')
  }
  render () {
    return <div onClick={this.opData}>this处理方法class实例方法</div>
  }
}

// 3.箭头函数方法，这个方法每次渲染的时候都会创建不同的回调函数不建议使用 
class ThisFun extends React.Component{
    state = {
        count: 0
    }
    opData(){
        console.log('用的是箭头函数');
    }
    render(){
        return <div onClick={()=>{this.opData()}}>箭头函数方法</div> // 这里的箭头函数指向外部环境，此处为render方法
    }
}
export { ThisFun, ThisBind,ThisClass }
